<template>
  <view class="container">
    <view class="form-container">
      <view class="form-item">
        <text class="label">原密码：</text>
        <input
          class="input"
          type="password"
          placeholder="请输入原密码"
          v-model="changePwd.oldPassword"
        />
      </view>
      <view class="form-item">
        <text class="label">新密码：</text>
        <input
          class="input"
          type="password"
          placeholder="请输入新密码"
          v-model="changePwd.newPassword"
        />
      </view>
      <view class="form-item">
        <text class="label">确认密码：</text>
        <input
          class="input"
          type="password"
          placeholder="请输入确认密码"
          v-model="changePwd.confirmPassword"
        />
      </view>
      <button class="submit-btn" @click="commit">提交</button>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';

// 修改密码表单对象
const changePwd = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

// 提交按钮点击事件
const commit = () => {
  // 验证原密码是否为空
  if (!changePwd.oldPassword) {
    uni.showToast({
      title: '请输入原密码',
      icon: 'none'
    });
    return;
  }

  // 验证新密码是否为空
  if (!changePwd.newPassword) {
    uni.showToast({
      title: '请输入新密码',
      icon: 'none'
    });
    return;
  }

  // 验证新密码长度是否符合要求（至少6位）
  if (changePwd.newPassword.length < 6) {
    uni.showToast({
      title: '新密码至少需要6位',
      icon: 'none'
    });
    return;
  }

  // 验证确认密码是否为空
  if (!changePwd.confirmPassword) {
    uni.showToast({
      title: '请再次输入新密码',
      icon: 'none'
    });
    return;
  }

  // 验证两次输入的新密码是否一致
  if (changePwd.newPassword !== changePwd.confirmPassword) {
    uni.showToast({
      title: '两次输入的新密码不一致',
      icon: 'none'
    });
    return;
  }

  // 调用修改密码接口
  uni.request({
    url: 'http://localhost:58080/admin-api/system/user/profile/update-password', // 修改密码接口地址
    method: 'PUT', // 使用 PUT 方法
    data: {
      oldPassword: changePwd.oldPassword,
      newPassword: changePwd.newPassword
    },
    header: {
      'Content-Type': 'application/json',
      // 如果需要携带 token，可以从本地存储中获取并设置到请求头中
      'Authorization': `Bearer ${uni.getStorageSync('userInfo').accessToken}`
    },
    success: (res) => {
		console.log(res)
      if (res.data.code === 0) {
        // 修改密码成功
        uni.showToast({
          title: '修改密码成功',
          icon: 'success'
        });
        // 清空表单
        changePwd.oldPassword = '';
        changePwd.newPassword = '';
        changePwd.confirmPassword = '';
        // 延迟跳转回个人中心或其他页面
		logout();
		
		// 跳转到登录页面
		uni.navigateTo({
			url: '/pages/login/login'
		});
      } else {
        // 修改密码失败
        uni.showToast({
          title: res.data.msg || '修改密码失败',
          icon: 'none'
        });
      }
    },
    fail: (err) => {
      // 请求失败
      uni.showToast({
        title: '网络请求失败',
        icon: 'none'
      });
      console.error(err);
    }
  });
};



// 退出登录
	const logout = () => {
		// 调用登出接口
		uni.request({
			url: 'http://localhost:58080/admin-api/system/auth/logout', // 登出接口地址
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				// 如果需要携带 token，可以从本地存储中获取并设置到请求头中
				'Authorization': `Bearer ${uni.getStorageSync('userInfo').accessToken}`
			},
			success: (res) => {
				if (res.statusCode === 200) {
					// 登出成功
					uni.showToast({
						title: '退出登录成功',
						icon: 'success'
					});
					// 清除本地存储的用户信息
					uni.removeStorageSync('userInfo');
				} else {
					// 登出失败
					uni.showToast({
						title: res.data.msg || '退出登录失败',
						icon: 'none'
					});
				}
			},
			fail: (err) => {
				// 请求失败
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
				console.error(err);
			}
		});
	};


</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f7f7f7;
}

.form-container {
  width: 80%;
  background-color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 20px;
}

.label {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.input {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 14px;
}

.submit-btn {
  width: 100%;
  height: 40px;
  background-color: #1aad19;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
</style>